<template>
  <div class="node-area">
    <HeaderSearch class="header-search">
      <template>
        <el-form class="search-from" label-position="left" :inline="true" >
          <el-form-item label="区域搜索：" class="area-search">
            <el-input v-model="area" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item class="search-btn">
            <el-button
              plain
              icon="el-icon-search"
              class="btn"
              @click="getAreaList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
    </HeaderSearch>
    <TableContent ref="TableContent" :params="params" :tableData="tableData" :areaList="areaList">
      <template #addBtn>
        <el-col class="col-btn">
          <el-button type="info" icon="el-icon-circle-plus-outline" @click="changeArea('add')"
            >新建</el-button
          >
        </el-col>
      </template>
      <template #operate="{ row }">
        <el-button type="text" size="small" @click="check(row.id)">
          查看详情
        </el-button>
        <el-button type="text" size="small" @click="changeArea('edit', row)"> 修改 </el-button>
        <el-button
          type="text"
          size="small"
          style="color: red"
          @click="delArea(row.id)"
        >
          删除
        </el-button>
      </template>
    </TableContent>
    <CheckDialog ref="CheckDialog" title="区域详情">
      <template #content>
        <el-row>
          <el-col :span="6">
            <p>区域名称：</p>
            <p>包含点位：</p>
          </el-col>
          <el-col :span="18">
            <p style="text-align-last: left">
              {{
                areaDetails.currentPageRecords &&
                areaDetails.currentPageRecords[0].region.name
              }}
            </p>
            <el-table :data="areaDetails.currentPageRecords">
              <el-table-column
                type="index"
                label="序号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="点位名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="vmCount"
                label="设备数量"
                align="center"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
    </CheckDialog>
    <AddOrEdit ref="AddOrEdit" :title="title" @addArea="addArea">
      <template #formDialog>
        <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="100px">
          <el-form-item label="区域名称：" prop="regionName">
            <el-input v-model="form.regionName" placeholder="请输入"  maxlength="15" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="备注说明：" prop="remark">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注（不超过40字）"  maxlength="40" show-word-limit></el-input>
          </el-form-item>
        </el-form>
      </template>
    </AddOrEdit>
  </div>
</template>

<script>
import HeaderSearch from '../components/HeaderSearch'
import TableContent from '../components/TableContent'
import CheckDialog from '../components/CheckDialog'
import AddOrEdit from '../components/AddOrEdit'
import { getAreaList, delArea, checkArea, addArea, editArea } from '@/api/point'
export default {
  name: 'Dkd2Area',

  components: {
    HeaderSearch,
    TableContent,
    CheckDialog,
    AddOrEdit
  },
  data () {
    return {
      // 地区查询
      area: '',
      // 分页
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      // 表格数据
      tableData: {},
      // 表头
      areaList: {
        name: '区域名称',
        nodeCount: '点位数',
        remark: '备注说明'
      },
      // 区域详情
      areaDetails: {},
      // 表单标题
      title: '',
      // 表单
      form: {},
      // 规则
      rules: {
        regionName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
    this.getAreaList()
  },

  methods: {
    // 获取表格数据
    async getAreaList () {
      let res
      try {
        this.$refs.TableContent.loading = true
        if (this.area) {
          res = await getAreaList({ ...this.params, name: this.area })
        } else {
          res = await getAreaList(this.params)
        }
      } finally {
        this.$refs.TableContent.loading = false
      }
      if (res.currentPageRecords.length <= 0 && this.params.pageIndex > 1) {
        this.params.pageIndex--
        this.getAreaList()
      }
      this.tableData = res
    },
    // 删除数据
    async delArea (id) {
      this.$confirm('是否要删除该区域, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await delArea(id)
          this.$message.success('区域删除成功')
          this.getAreaList()
        } catch (err) {
          this.$message.error(err.response.data)
        }
      })
    },
    // 查看详情
    async check (id) {
      this.$refs.CheckDialog.visible = true
      const res = await checkArea({ ...this.params, regionId: id })
      this.areaDetails = res
      console.log(res)
    },
    // 新增或修改
    changeArea (val, row) {
      if (val === 'add') {
        this.title = '新增区域'
      } else {
        this.title = '修改区域'
        this.form = { regionName: row.name, remark: row.remark, id: row.id }
        console.log(row)
      }
      this.$refs.AddOrEdit.visible = true
    },
    // 新增区域
    async addArea () {
      try {
        if (this.title === '新增区域') {
          await this.$refs.form.validate()
          await addArea(this.form)
          this.$message.success('新增成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        } else {
          await this.$refs.form.validate()
          await editArea(this.form)
          this.$message.success('修改成功')
          this.$refs.AddOrEdit.visible = false
          this.getAreaList()
        }
      } catch (err) {
        this.$message.error(err.response.data)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header-search {
  .search-from {
    text-align-last: left;
    height: 100%;
    .area-search {
      width: 18%;
      margin: 0;
      /deep/ .el-form-item__label {
        line-height: 64px !important;
      }
      /deep/ .el-form-item__content {
        line-height: 64px !important;
        .el-input__inner {
          height: 36px;
        }
      }
    }

    .search-btn {
      height: 100%;
      margin: 0;
      padding: 14px;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 36px;
        background-color: #5f84ff;
        color: #fff;
        padding: 0;
      }
    }
  }
}
</style>
